<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

    <title>index</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery-3.3.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>

    <link href="css/index.css" rel="stylesheet"/>
</head>

<body>
<div class="main_index">
    <div class="head">
        <div class="head_user"></div>
        <script>
            $(function () {
                $.get("/employees/loginName", {}, function (data) {
                    $(".head_user").html(data.data + "，欢迎您");
                });
            });
        </script>
        <h1>SP 智慧停车场管理系统</h1>
    </div>

    <div class="body">
        <div class="body_left">
            <div class="list-group function" role="group">
                <button class="list-group-item active" type="button" value="employees">员工管理</button>
                <button class="list-group-item btn-default" type="button" value="users">用户管理</button>
                <button class="list-group-item btn-default" type="button" value="devices">设备管理</button>
                <button class="list-group-item btn-default" type="button" value="finances">财务报表管理</button>
            </div>

            <div class="list-group exit" role="group">
                <button class="list-group-item btn-info" type="button">首页</button>
                <button class="list-group-item btn-danger" type="button">退出</button>
            </div>
        </div>

        <div class="body_right container-fluid">
            <div id="employees">
                <div>
                    <div class="right_head">
                        <form action="" class="form-inline" method="post">
                            <div class="form-group">
                                <label for="employees_id">id</label>
                                <input class="form-control" id="employees_id" placeholder="请输入管理员id" type="email">
                            </div>

                            <div class="form-group">
                                <label for="employees_name">姓名</label>
                                <input class="form-control" id="employees_name" placeholder="请输入姓名" type="text">
                            </div>

                            <button class="btn btn-default" type="submit">查询</button>
                        </form>
                    </div>

                    <div class="table-responsive">
                        <table class="table table-striped table-hover" id="employees_table">
                            <tr class="warning">
                                <th><input id="first_btn" type="checkbox"></th>
                                <th>id</th>
                                <th>姓名</th>
                                <th>性别</th>
                                <th>手机号</th>
                                <th>工作</th>
                                <th>权限</th>
                                <th>创建时间</th>
                                <th>修改时间</th>
                                <th>操作</th>
                            </tr>

                            <tr>
                                <td><input name="ids" type="checkbox" value="' + employee.id + '"></td>
                                <td>id</td>
                                <td>姓名</td>
                                <td>性别</td>
                                <td>手机号</td>
                                <td>工作</td>
                                <td>权限</td>
                                <td>创建时间</td>
                                <td>修改时间</td>
                                <td>
                                    <a class="btn btn-default btn-sm" href="/employees/employee.id"
                                       style="margin-right: 10px;">修改</a>
                                    <a class="btn btn-default btn-sm" href="employee.id">删除</a>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>

                <div class="nav">
                    <nav aria-label="Page navigation">
                        <ul class="pagination">
                            <li>
                                <a aria-label="Previous" href="#">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                            <li class="active"><a href="#">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">4</a></li>
                            <li><a href="#">5</a></li>
                            <li>
                                <a aria-label="Next" href="#">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>

            <div id="users">

            </div>

            <div id="devices">

            </div>

            <div id="finances">

            </div>
        </div>
    </div>
</div>

</body>

<script type="text/javascript">
    $(function () {
        //默认显示员工管理部分
        let $bodyRight = $(".body_right");
        $bodyRight.children().hide();

        //请求所需页面
        $.get("/employees.html", function (data) {
            //把相应的整个页面内容全部赛进去
            $("#employees").html(data);
        });
        $($bodyRight.children().get(0)).show();

        let $list = $(".function .list-group-item");
        $list.click(function () {
            $list.removeClass("active");
            $(this).addClass("active");

            //先全部隐藏
            $bodyRight.children().hide();
            $bodyRight.children().html("");

            //后加载目标
            var target = $(this).attr("value");
            $.get("/" + target + ".html", function (data) {
                //把相应的整个页面全部赛进去
                $("#" + target).html(data).fadeIn();//使内容出现
            });
        });

        $(".exit .btn-info").click(function () {
            location.href = "/index.html";
        });

        $(".exit .btn-danger").click(function () {
            $.get("/employees/logout", {}, function (data) {
                if (data.code === 1) {
                    alert(data.data);
                    location.href = "/login.html";
                } else {
                    alert(data.msg);
                }
            })
        });
    });
</script>

</html>